<template>
  <!-- <div
    :class="[head ? ( pagination ? 'headAndPag' : 'headNoPag' ) : ( pagination ? 'noHeadPag' : '' ) ,'searchTable']"
  >

    <div class="searchTable_main">
      <el-table
        v-loading="sloading"
        ref="searchTable"
        class="searchTable_table"
        :height="height? height : '100%'"
        :stripe="stripe"
        :data="dataList"
        style="overflow-y: auto;"
        :row-key="row => row.rowkey"
        @sort-change="sortChange"
        @select="select"
        @select-all="selectChange"
        :border="border"
      >

        <slot />
      </el-table>
    </div>
    <div :class="[pageSmall ? 'smallPage' : '', 'page', 'searchTable_pagination']" :style="pagination === false ? 'padding:30px 0px 0px;' : 'padding:30px 0px 0px;'">
      <el-pagination
        :small="pageSmall || false"
        v-if="paginationData"
        background
        :layout="pageLayout || 'slot, prev, pager, next, jumper'"
        :page-size="pageSizeData"
        :total="total"
        @current-change="pageChangeHandler"
        :current-page="pageIndex"
      >
        <span class="pagitnation_info" style="margin-right: 20px;">
          总计: {{ total }},
          <span v-if="true">
            每页显示:
            <el-select
              popper-class="pagitnation_size_select"
              class="pagitnation_size"
              v-model="pageSizeData"
              @change="pageSizeChange"
            >
              <el-option :label="10" :value="10" />
              <el-option :label="15" :value="15" />
              <el-option :label="20" :value="20" />
            </el-select>
          </span>
          共 {{ Math.ceil(total / pageSizeData) }} 页
          本页
          {{ (pageIndex - 1) * pageSizeData + 1 + '-' + (pageIndex === Math.ceil(total / pageSizeData) ? total : pageIndex * pageSizeData) }}
          条
        </span>
      </el-pagination>
    </div>
    <div>

    </div> -->
    <div>
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
        ],
      searchText: "",
      sortProp: this.$props.sortdata
        ? sessionStorage.getItem(this.$props.sortdata.sortProp)
        : "",
      sortOrder: this.$props.sortdata
        ? sessionStorage.getItem(this.$props.sortdata.sortOrder)
        : "",
      pageIndex: 1,
      tableTotal: 0,
      sloading: this.$props.loading || false,
      pageSizeData: this.$props.pageSize || 15,
      paginationData: this.$props.pagination === undefined ? true : this.$props.pagination
    }
  },
  props: [
    "pagination", // 是否分页
    "pageSize", // 每页条数
    "data", // [{data1},{data2}]
    "searchKeys", // [key1,key2]
    "selection", // 前面的checkbox  传入selectChange事件
    "searchStyle", // 搜索框样式
    "pageLayout", // 分页布局
    "pageSmall", // 是否是mini样式
    "selectRowKeys", // 选中的行
    "rowkey", // 每一行的key
    "loading",
    "isDialog",
    "head",
    "border",
    "sortdata",
    "backgroundPaging", // 后台分页
    "onSortChange",
    "onPageChange",
    "dataTotal",
    "stripe", // 斑马纹
    "notShowIndex",
    "height",
    "currenIndex"
  ],
  watch: {
    data: function () {
      if (!this.backgroundPaging) {
        this.pageChangeHandler(1)
      }
    },
    selectRowKeys: function () {
      // this.selectDefault(true)
      this.selectDefault()
    },
    currenIndex: function (newVal, oldVal) {
      if (newVal) {
        this.pageIndex = newVal
      }
    },
    dataList: function () {
      this.selectDefault()
    }
  },
  computed: {
    dataList: function () {
      if (this.backgroundPaging) {
        return this.data
      }
      const self = this
      let tmpData = this.data
      // 查询
      if (
        tmpData &&
        tmpData.length > 0 &&
        self.searchText !== "" &&
        self.searchKeys &&
        self.searchKeys.length > 0
      ) {
        tmpData = tmpData.filter(element => {
          let sum = -1

          self.searchKeys.forEach(ele => {
            if (!element[ele]) {
              sum++
            }
            if (element[ele]) {
              sum +=
                element[ele]
                  .toString()
                  .toLowerCase()
                  .indexOf(self.searchText.toLowerCase()) >= 0
                  ? 1
                  : 0
            }
          })
          return sum >= 0
        })
      }
      // 排序
      if (self.sortProp && self.sortOrder) {
        if (self.sortOrder === "asc") {
          tmpData = this.shellSort(tmpData, function (a, b) {
            return a > b
          })
        } else if (self.sortOrder === "desc") {
          tmpData = this.shellSort(tmpData, function (a, b) {
            return a < b
          })
        }
      }
      if (tmpData) {
        // 分页总条数
        this.tableTotal = tmpData.length

        // 分页数据
        if (self.paginationData) {
          tmpData = tmpData.slice(
            (self.pageIndex - 1) * self.pageSizeData,
            self.pageIndex * self.pageSizeData
          )
        }
      }
      return tmpData
    },
    total: function () {
      return this.backgroundPaging ? this.$props.dataTotal : this.tableTotal
    }
  },
  methods: {
    shellSort(arr, func) {
      const self = this
      const tmpArr = [...arr]
      let len = arr.length
      let temp
      let gap = 1
      while (gap < len / 3) {
        gap = gap * 3 + 1
      }
      for (gap; gap > 0; gap = Math.floor(gap / 3)) {
        for (var i = gap; i < len; i++) {
          temp = tmpArr[i]
          for (
            var j = i - gap;
            j >= 0 && func(tmpArr[j][self.sortProp], temp[self.sortProp]);
            j -= gap
          ) {
            tmpArr[j + gap] = tmpArr[j]
          }
          tmpArr[j + gap] = temp
        }
      }
      return tmpArr
    },
    pageChangeHandler: function (currentPage) {
      this.pageIndex = currentPage
      if (this.onPageChange) {
        this.onPageChange(currentPage) // 获取当前页
      }
    },
    sortChange: function (column, prop, order, e) {
      this.sortProp = column.prop

      switch (column.order) {
      case "descending":
        this.sortOrder = "desc"
        break
      case "ascending":
        this.sortOrder = "asc"
        break
      default:
        this.sortOrder = ""
        break
      }
      if (this.sortdata) {
        sessionStorage.setItem(this.sortdata.sortProp, this.sortProp)
        sessionStorage.setItem(this.sortdata.sortOrder, this.sortOrder)
      }
      if (this.onSortChange) {
        this.onSortChange()
      }
    },
    selectDefault: function (clear) {
      const self = this
      if (this.selection && self.selectRowKeys) {
        setTimeout(() => {
          self.$refs.searchTable.clearSelection()
          this.dataList.forEach(ele => {
            self.selectRowKeys.forEach(element => {
              if (ele[self.rowkey] === element) {
                self.$refs.searchTable.toggleRowSelection(ele)
              }
            })
          })
        })
      }
    },
    selectChange: function (rows, row, type) {
      console.log(rows,row,type)
    },
    select: function (val) {
      console.log(val)
    },
    pageSizeChange: function (val) {
      this.$emit("pageSizeChange", val)
    }
  }
}
</script>

<style lang="scss">
  .el-table__header-wrapper table.el-table__header thead.has-gutter tr th {
    background: red;
  }
  .el-table__body-wrapper .el-table__body tbody tr td {
    background: salmon; 
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background: salmon;
  }
// .el-table {
//   flex:none;
// }
// .el-table__header-wrapper, .el-table__footer-wrapper{
//   background-color: #f8f9fa;
// }
// .searchInput {
//   float: right;
// }
// .page {
//   text-align: right;
// }
// .el-pagination {
//   padding: 2px 0;
//   overflow: hidden;
//   .pagitnation_info {
//     font-weight: initial;
//   }
//   .el-select{
//     .el-input{
//      width: 65px!important;
//      height: 28px!important;
//    }
//   }
//   .el-input{
//     width: 28px!important;
//     height: 28px!important;
//   }
// }
// .smallPage .el-pagination button {
//   position: relative;
//   top: 3px;
// }
// .smallPage .el-pagination__jump {
//   margin: 0px;
// }
// .searchTable_main {
//   overflow: auto;
//   flex: 1;
//   display: flex;
//   flex-direction: column;
// }
// .searchTable_pagination {
//   .btn-next,
//   .btn-prev,
//   .el-pager li {
//     // margin: 0px !important;
//     border-radius: 3px;
//     background-color: #fff !important;
//     border: 1px solid #e4e4e4 !important;
//     &:hover {
//       color: #606266 !important;
//       background-color: #edf2fe !important;
//     }
//   }
//   .el-pager li {
//     border-radius: 3px;
//     // border-right: none !important;
//   }
//   .el-pager li.active {
//     border-radius: 3px;
//     background-color: #305fd0 !important;
//     // border-radius: 0px !important;
//     border: none !important;

//     &:hover {
//       color: white !important;
//     }
//   }
//   .el-pagination__editor {
//     width: 35px;
//     height: 25px;

//     input {
//       padding: 0px;
//       background-color: #ffffff;
//       border: solid 1px #e4e4e4;
//     }
//   }
// }
// .searchTable_main .el-table {
//   height: 100%;
//   // 序列号center start
//   tr:first-child{
//     th:first-child{
//       text-align: center;
//     .cell{
//       text-align: center;
//       padding: 0px!important;
//      }
//     }
//   }
//   tr{
//     td:first-child{
//        text-align: center;
//       .cell{
//         text-align: center;
//          padding: 0px!important;
//       }
//     }
//   }
//   // // 序列号center  end
//   .el-table__body .cell{
//      padding-left: 0px;
//      padding-right: 8px;
//   }
//   .el-table__body tr.el-table__row--striped td {
//     background-color: #fafbfb;

//     &:hover {
//       background-color: #f5f7fa;
//     }
//   }
//   .gutter {
//     border: none;
//   }

//   td {
//     padding: 0px 12px!important;
//     height: 50px;
//     line-height: 50px;
//     color: #000;
//     // border-bottom: 1px solid #efefef;
//   }
//   th {
//     background-color: #fafafa!important;
//     border-color: transparent!important;
//     div{
//       background-color: #fafafa!important;
//     }
//     .cell{
//       padding-left: 12px!important;
//       padding-right: 0px!important;
//     }
//   }
//   th.is-leaf{
//      border-bottom:none;
//   }
// }
// .searchTable .el-table__body {
//   width: 100% !important;
// }
// td .el-container {
//   padding: 15px;
//   background-color: white;
// }
// td .el-container .el-table {
//   min-height: 300px;
// }
// td .el-tabs {
//   /* padding:15px; */
//   background-color: white;
// }

.headAndPag {
  grid-template-rows: 60px 1fr 60px;
}
.headNoPag {
  grid-template-rows: 60px 1fr;
}
.noHeadPag {
  grid-template-rows: 1fr 60px;
}
.searchTable {
  display: flex;
  flex-direction: column;
  flex: 1;
  .pagitnation_size {
    .el-select {
      .el-input {
        width: 42px;
        height: 28px;
      .el-input__inner {
        font-size: 12px;
        padding: 0px;
        margin-left: -8px;
        height: 25px;
        text-align: left;
        text-indent: 9px;
        background-color: #ffffff;
        border: solid 1px #e4e4e4;
        width: 52px !important;
      }
      .el-input__suffix {
        right: -4px;
        .el-input__icon{
          line-height: 28px;
        }
      }
      .el-select__caret::before {
          content: '\E60C';
        }
      }
    }

  }
}
.pagitnation_size_select {
  transform: translateX(-8px);
  .popper__arrow {
    left: 23px !important;
  }
}
.el-pager li.active {
  color: #fff;
  border-radius: 3px;
  border-color: #1080cc;
  background-color: #1080cc;
}

.el-pagination.is-background .el-pager li {
  font-weight: normal;
  border-radius: 3px;
}
.searchTable .pagitnation_size .el-input .el-input__inner {
  height: 28px;
  margin-left: -5px;
  border-radius: 3px;
}
.el-pagination__editor.el-input .el-input__inner {
  height: 28px!important;
  border-radius: 3px;
}
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next {
  border-radius: 3px;
}
// 操作下的按钮
.table-button:not(.is-leaf) {
  .cell {
    // border: 1px solid red;
    // display:flex;
    // justify-content: center;
    .el-button {
      border: none;
    }
    // 警告的颜色
    .el-button--danger {
      color: red;
      background-color: #FFF;
    }
    .el-button--danger:not(.is-disabled):hover {
      // color: red;
      background-color: #FFEDED;
    }
    .el-button--danger.is-disabled {
      color:#FFACAC;
    }
    .el-button--primary {
      background-color: #FFF;
    }
    .el-button--primary:hover{
      background-color: #EBF2FF;
      color:#407FF3;
    }
  }
}
</style>